<template>
    <div class="relative overflow-hidden">
      <!-- Hero Section -->
      <div class="gradient-bg text-white py-20 md:py-32 px-4 relative overflow-hidden">
        <div class="absolute inset-0 bg-primary/30 overflow-hidden">
          <div class="absolute -right-10 -top-10 w-72 h-72 bg-white/10 rounded-full blur-3xl"></div>
          <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-white/5 rounded-full blur-3xl"></div>
          <div class="absolute left-10 bottom-10 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
        </div>
        <div class="container mx-auto relative z-10">
          <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight text-shadow mb-6">
              释放AI的无限可能
            </h1>
            <p class="text-[clamp(1rem,2vw,1.25rem)] opacity-90 mb-10">
              强大的AI助手平台，为您提供智能对话、内容生成、数据分析等全方位AI服务
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
              <router-link to="/chat" class="bg-white text-primary font-semibold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                立即体验 <i class="fa fa-arrow-right ml-2"></i>
              </router-link>
              <router-link to="/pricing" class="bg-transparent border-2 border-white text-white font-semibold py-3 px-8 rounded-full hover:bg-white/10 transition-all duration-300">
                查看定价
              </router-link>
            </div>
          </div>
        </div>
      </div>
  
      <!-- Features Section -->
      <section class="py-20 px-4 bg-white">
        <div class="container mx-auto">
          <div class="text-center mb-16">
            <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">强大功能，简单使用</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">我们的AI平台提供多种强大功能，帮助您更高效地完成工作</p>
          </div>
  
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Feature 1 -->
            <div class="bg-gray-50 rounded-2xl p-8 shadow-md card-hover">
              <div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
                <i class="fa fa-comments text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-3">智能对话</h3>
              <p class="text-gray-600">与我们的AI助手进行自然流畅的对话，获取即时帮助和建议。</p>
            </div>
  
            <!-- Feature 2 -->
            <div class="bg-gray-50 rounded-2xl p-8 shadow-md card-hover">
              <div class="w-16 h-16 bg-secondary/10 rounded-xl flex items-center justify-center mb-6">
                <i class="fa fa-file-text text-secondary text-2xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-3">内容生成</h3>
              <p class="text-gray-600">快速生成文章、故事、代码等内容，提高工作效率和创造力。</p>
            </div>
  
            <!-- Feature 3 -->
            <div class="bg-gray-50 rounded-2xl p-8 shadow-md card-hover">
              <div class="w-16 h-16 bg-accent/10 rounded-xl flex items-center justify-center mb-6">
                <i class="fa fa-bar-chart text-accent text-2xl"></i>
              </div>
              <h3 class="text-xl font-bold mb-3">数据分析</h3>
              <p class="text-gray-600">深入分析您的数据，发现有价值的见解和模式，支持决策制定。</p>
            </div>
          </div>
        </div>
      </section>
  
      <!-- Models Section -->
      <section class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto">
          <div class="text-center mb-16">
            <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">强大的AI模型</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">我们集成了多种先进的AI模型，满足不同场景的需求</p>
          </div>
  
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Model 1 -->
            <div class="bg-white rounded-2xl overflow-hidden shadow-md card-hover">
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">对话模型</h3>
                <p class="text-gray-600 mb-4">自然流畅的对话体验，适用于聊天机器人、客服助手等场景。</p>
                <div class="flex flex-wrap gap-2 mb-4">
                  <span class="bg-primary/10 text-primary text-xs px-3 py-1 rounded-full">对话</span>
                  <span class="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full">多轮</span>
                  <span class="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full">知识库</span>
                </div>
                <button class="w-full py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                  选择模型
                </button>
              </div>
            </div>
  
            <!-- Model 2 -->
            <div class="bg-white rounded-2xl overflow-hidden shadow-md card-hover">
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">生成模型</h3>
                <p class="text-gray-600 mb-4">强大的内容生成能力，适用于文章写作、创意生成等场景。</p>
                <div class="flex flex-wrap gap-2 mb-4">
                  <span class="bg-secondary/10 text-secondary text-xs px-3 py-1 rounded-full">生成</span>
                  <span class="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full">创意</span>
                  <span class="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full">写作</span>
                </div>
                <button class="w-full py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                  选择模型
                </button>
              </div>
            </div>
  
            <!-- Model 3 -->
            <div class="bg-white rounded-2xl overflow-hidden shadow-md card-hover">
              <div class="p-6">
                <h3 class="text-xl font-bold mb-2">分析模型</h3>
                <p class="text-gray-600 mb-4">专业的数据分析能力，适用于数据挖掘、模式识别等场景。</p>
                <div class="flex flex-wrap gap-2 mb-4">
                  <span class="bg-accent/10 text-accent text-xs px-3 py-1 rounded-full">分析</span>
                  <span class="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full">数据</span>
                  <span class="bg-gray-100 text-gray-600 text-xs px-3 py-1 rounded-full">预测</span>
                </div>
                <button class="w-full py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                  选择模型
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
  
      <!-- Testimonials Section -->
      <section class="py-20 px-4 bg-white">
        <div class="container mx-auto">
          <div class="text-center mb-16">
            <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-4">用户评价</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">听听我们的用户如何评价我们的AI平台</p>
          </div>
  
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Testimonial 1 -->
            <div class="bg-gray-50 rounded-2xl p-8 shadow-md">
              <div class="flex items-center mb-6">
                <img src="https://picsum.photos/id/1005/100/100" alt="用户头像" class="w-14 h-14 rounded-full object-cover mr-4">
                <div>
                  <h4 class="font-bold">张明</h4>
                  <p class="text-gray-500 text-sm">内容创作者</p>
                </div>
              </div>
              <p class="text-gray-600 italic">"这个AI平台彻底改变了我的工作方式。内容生成功能帮我节省了大量时间，让我能够专注于更有创意的工作。"</p>
              <div class="mt-4 text-yellow-400">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
              </div>
            </div>
  
            <!-- Testimonial 2 -->
            <div class="bg-gray-50 rounded-2xl p-8 shadow-md">
              <div class="flex items-center mb-6">
                <img src="https://picsum.photos/id/1000/100/100" alt="用户头像" class="w-14 h-14 rounded-full object-cover mr-4">
                <div>
                  <h4 class="font-bold">李华</h4>
                  <p class="text-gray-500 text-sm">数据分析师</p>
                </div>
              </div>
              <p class="text-gray-600 italic">"分析模型的准确性令人惊讶。它帮助我发现了许多之前忽略的模式和趋势，为我们的业务决策提供了有力支持。"</p>
              <div class="mt-4 text-yellow-400">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
              </div>
            </div>
  
            <!-- Testimonial 3 -->
            <div class="bg-gray-50 rounded-2xl p-8 shadow-md">
              <div class="flex items-center mb-6">
                <img src="https://picsum.photos/id/1012/100/100" alt="用户头像" class="w-14 h-14 rounded-full object-cover mr-4">
                <div>
                  <h4 class="font-bold">王芳</h4>
                  <p class="text-gray-500 text-sm">中小企业主</p>
                </div>
              </div>
              <p class="text-gray-600 italic">"客服对话模型为我们的客户服务团队提供了极大的帮助。它能够快速回答常见问题，让我们的团队能够专注于更复杂的客户需求。"</p>
              <div class="mt-4 text-yellow-400">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
              </div>
            </div>
          </div>
        </div>
      </section>
  
      <!-- CTA Section -->
      <section class="py-20 px-4 gradient-bg text-white">
        <div class="container mx-auto text-center">
          <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold mb-6">准备好开始您的AI之旅了吗？</h2>
          <p class="text-white/90 max-w-2xl mx-auto mb-10">立即注册，免费体验我们强大的AI功能</p>
          <div class="flex flex-col sm:flex-row justify-center gap-4">
            <router-link to="/register" class="bg-white text-primary font-semibold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
              免费注册 <i class="fa fa-user-plus ml-2"></i>
            </router-link>
            <router-link to="/chat" class="bg-transparent border-2 border-white text-white font-semibold py-3 px-8 rounded-full hover:bg-white/10 transition-all duration-300">
              立即体验 <i class="fa fa-rocket ml-2"></i>
            </router-link>
          </div>
        </div>
      </section>
    </div>
  </template>
  
  <script>
  export default {
    name: 'HomeView'
  }
  </script>
      